<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="search_div">
                <!-- <div class="add">
                    <Button size="default" icon="md-add" type="primary" @click="addPage">新增商品</Button>
                </div> -->
                <Form :model="search" class="search_box" inline label-position="right">
                    <FormItem label="姓名：">
                        <Input v-model="search.username"></Input>
                    </FormItem>

                    <FormItem label="部门：">
                        <Input v-model="search.department"></Input>
                    </FormItem>

                    <FormItem label="职位：">
                        <Input v-model="search.position"></Input>
                    </FormItem>

                    <FormItem label="审核状态：">
                        <Select class="option" v-model="search.status">
                            <Option v-for="item in auditStatusList " :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>

                    <FormItem>
                        <Button icon="md-search" type="primary" @click="searchList">搜索</Button>
                    </FormItem>
                </Form>

            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>


        <!-- <myModal :isShow="modal1" @close="modal1=false"></myModal> -->
    </div>
</template>
<script>
    import myBtn from '@/view/staff/btn.vue'
    // import myModal from '@/view/staff/myModal.vue'
    import axios from '@/libs/api.request'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    export default {
        name: 'staff-page',
        components: {
            myBtn,
            // myModal
        },
        data() {
            return {
                // 搜索对象
                search: {
                    username: '',
                    department: '',
                    position: '',
                    status: -1,
                    page: 1,
                    rows: 10
                },

                // 审核状态列表
                auditStatusList: [{
                        id: -1,
                        name: '全部'
                    },
                    {
                        id: 0,
                        name: '审核中'
                    },
                    {
                        id: 1,
                        name: '通过'
                    },
                    {
                        id: 2,
                        name: '驳回'
                    }
                ],

                modal1: false,

                loading: false,

                // 数据总条数
                total: 0,

                columns1: [{
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'username'
                    },
                    {
                        title: '所属部门',
                        align: 'center',
                        key: 'department'
                    },
                    {
                        title: '职位',
                        align: 'center',
                        key: 'position'
                    },
                    {
                        title: '电话号码',
                        align: 'center',
                        key: 'tel'
                    },
                    {
                        title: '审核状态',
                        align: 'center',
                        width: 100,
                        key: 'status',
                        render: (h, params) => {
                            return h(myBtn, {
                                style: {
                                    cursor: 'default'
                                },
                                props: {
                                    status: params.row.status,
                                    name: params.row.status == 1 ? '通过' : params.row.status == 2 ? '驳回' : '审核中'
                                }
                            })
                        }
                    },
                    {
                        title: '用户类型',
                        align: 'center',
                        key: 'role_zw'
                    },
                    // {
                    //     title: '积分',
                    //     align: 'center',
                    //     key: ''
                    // },
                    // {
                    //     title: '管理权限',
                    //     key: 'enable',
                    //     width: 100,
                    //     align: 'center',
                    //     render: (h, params) => {
                    //         return h(myBtn, {
                    //             props: {
                    //                 status: params.row.status,
                    //                 name: '设置'
                    //             },
                    //             on: {
                    //                 set: () => {
                    //                     this.modal1 = true
                    //                 }
                    //             }
                    //         })
                    //     }
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        width: 350,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                params.row.status == 2 || params.row.status == 0 ?
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default',
                                        icon: 'ios-checkmark-circle-outline',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.yes_or_no('admin-user-ajax_examine_pass', params.row.id)
                                        }
                                    }
                                }, '通过') :
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'default',
                                        icon: 'ios-remove-circle-outline',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.yes_or_no('admin-user-ajax_examine_reject', params.row.id)
                                        }
                                    }
                                }, '驳回'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            let data = {
                                                id: params.row.id
                                            }
                                            this.myClose('staff-edit')
                                            this.$_changePage('staff-edit', '人员修改', data)
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true,
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 2) {
                                                    return false
                                                }
                                                this.deleteStaffByid(params.row.id)
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 2
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }
                ],
                data1: [],
            }
        },
        methods: {
            ...mapMutations(['myClose']),
            ...mapGetters(['getRole']),

            // 获取用户列表
            getList() {
                this.loading = true
                let data = this.search
                axios.ajax_post('admin-user-ajax_get_user', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        ({
                            list: this.data1,
                            total_num: this.total
                        } = res.data.data)

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getList()
                        }
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 搜索
            searchList() {
                this.search.page = 1
                this.search.rows = 10
                this.getList()
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getList()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getList()
            },

            yes_or_no(url, id) {
                let data = {
                    userid: id
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.getList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 删除人员
            deleteStaffByid(userid) {
                axios.ajax_post('admin-user-ajax_del_user', {
                    userid
                }).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: '删除成功',
                            duration: 3
                        })
                        this.getList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.getList()
        }

    }
</script>
<style lang="less" scoped>
    .select {
        width: 150px;
        margin-right: 60px;
    }
</style>